<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    :close-on-click-modal="false"
    :show-close="true"
    @closed="handleDialogClosed"
  >
    <div class="upload-container">
      <div
        class="upload-area"
        @click="triggerFileUpload"
        @dragover.prevent
        @drop.prevent="handleFileDrop"
      >
        <el-icon class="upload-icon"><Upload /></el-icon>
        <div class="upload-text">点击或拖拽提交文件到此处上传</div>
        <div class="upload-hint">支持 .doc, .docx 格式</div>
        <input
          type="file"
          ref="fileInput"
          style="display: none"
          @change="handleFileChange"
          accept=".doc,.docx"
        />
      </div>
      <div class="file-list" v-if="selectedFile">
        <div class="file-item">
          <span class="file-name">{{ selectedFile.name }}</span>
          <el-button type="danger" size="small" @click="removeFile"
            >删除</el-button
          >
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button
          type="primary"
          @click="submitUpload"
          :disabled="!selectedFile"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { Upload } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "上传文件",
  },
  allowedTypes: {
    type: Array,
    default: () => ["doc", "docx"],
  },
});

const emit = defineEmits(["update:visible", "upload-success", "upload-cancel"]);

// 同步外部visible属性与内部dialogVisible
const dialogVisible = ref(props.visible);
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);
watch(
  () => dialogVisible.value,
  (newVal) => {
    emit("update:visible", newVal);
  }
);

const fileInput = ref(null);
const selectedFile = ref(null);

// 触发文件选择
const triggerFileUpload = () => {
  fileInput.value.click();
};

// 处理文件选择
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    // 检查文件类型
    const fileType = file.name.split(".").pop().toLowerCase();

    if (props.allowedTypes.includes(fileType)) {
      selectedFile.value = file;
    } else {
      const allowedTypesText = props.allowedTypes
        .map((type) => `.${type}`)
        .join(" 或 ");
      ElMessage.error(
        `不支持的文件格式，请上传 ${allowedTypesText} 格式的文件`
      );
    }
  }
};

// 处理文件拖拽
const handleFileDrop = (event) => {
  const file = event.dataTransfer.files[0];
  if (file) {
    // 检查文件类型
    const fileType = file.name.split(".").pop().toLowerCase();

    if (props.allowedTypes.includes(fileType)) {
      selectedFile.value = file;
    } else {
      const allowedTypesText = props.allowedTypes
        .map((type) => `.${type}`)
        .join(" 或 ");
      ElMessage.error(
        `不支持的文件格式，请上传 ${allowedTypesText} 格式的文件`
      );
    }
  }
};

// 移除已选文件
const removeFile = () => {
  selectedFile.value = null;
  if (fileInput.value) {
    fileInput.value.value = "";
  }
};

// 提交上传
const submitUpload = () => {
  if (selectedFile.value) {
    // 触发上传成功事件，传递文件对象
    emit("upload-success", selectedFile.value);
    dialogVisible.value = false;
  } else {
    ElMessage.warning("请先选择文件");
  }
};

// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
  emit("upload-cancel");
};

// 弹窗关闭时重置数据
const handleDialogClosed = () => {
  selectedFile.value = null;
  if (fileInput.value) {
    fileInput.value.value = "";
  }
};
</script>

<style scoped lang="scss">
/* 上传弹窗样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.upload-area {
  width: 100%;
  height: 180px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s;

  &:hover {
    border-color: #409eff;
  }
}

.upload-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 16px;
  color: #606266;
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: #909399;
}

.file-list {
  width: 100%;
  margin-top: 16px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 8px;
}

.file-name {
  font-size: 14px;
  color: #606266;
  word-break: break-all;
  max-width: 70%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
